﻿<!DOCTYPE html>
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" xmlns="http://www.w3.org/1999/xhtml"
                                     xmlns:th="http://www.thymeleaf.org"><!--<![endif]-->
<head>

<!-- Basic Page Needs
================================================== -->
    <meta charset="utf-8"/>
    <title>商品</title>

<!-- Mobile Specific Metas
================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<!-- CSS
================================================== -->
    <link rel="stylesheet" href="css/style.css" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" href="css/colors/green.css" th:href="@{/css/colors/green.css}" id="colors"/>
 
<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body class="boxed">
<div id="wrapper">


	<!-- Header
        ================================================== -->
	<div th:replace="fragments/header :: header"></div>


<!-- Titlebar
================================================== -->
<section class="parallax-titlebar fullwidth-element"  data-background="#000" data-opacity="0.45" data-height="160">

	<img th:src="@{/images/荷兰猪.jpg}" alt="" />
	<div class="parallax-overlay"></div>

	<div class="parallax-content">
		<h2>萌宠网<span>宠物种类丰富的网站</span></h2>

		<nav id="breadcrumbs">
			<ul>
				<li><a href="@{index}">首页</a></li>
				
				<li>商品</li>
			</ul>
		</nav>
	</div>

</section>


<div class="container">

	<!-- Content
	================================================== -->

	<div class="sixteen columns full-width">

		<!-- Ordering -->
		<select class="orderby">
			<option th:text="${items_category}"></option>
		</select>

	</div>

	<!-- Products -->
	<div class="products">

		<div th:each="item,itemStat : ${items}">

		    <!-- Product  -->
		    <div class="four columns">
			    <figure class="product">
				    <div class="mediaholder">
					    <a href="variable-product-page.html" th:href="@{'/singleItem/' + ${item.item_id}}">
						    <img alt="" src="images/狗1.jpg" th:src="@{'/images/' + ${item.image}}" />
						    <div class="cover">
							    <img alt="" src="images/狗1-1.jpg" th:src="@{'/images/' + ${item.image}}" />
						    </div>
					    </a>
					    <a th:href="@{/addToCart(item_id = ${item.item_id}, quantity = 1)}" class="product-button"><i class="fa fa-shopping-cart"></i> 加入购物车</a>
				    </div>

				    <a href="variable-product-page.html">
					    <section>
						    <span class="product-category"></span>
						    <h5 th:text="${item.name}"></h5>
						    <span class="product-price" th:text="'¥' + ${item.price}">¥</span>
					    </section>
				    </a>
			    </figure>
		    </div>

		</div>
		<div class="clearfix"></div>

		<!-- Pagination -->
		<div class="pagination-container">
			<nav class="pagination">
				<ul>
					<li><a href="#" class="current-page">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
				</ul>
			</nav>

			<nav class="pagination-next-prev full-width">
				<ul>
					<li><a href="#" class="prev"></a></li>
					<li><a href="#" class="next"></a></li>
				</ul>
			</nav>
		</div>

	</div>

</div>

<div class="margin-top-15"></div>

	<!-- Footer
        ================================================== -->
	<div th:replace="fragments/footer :: footer"></div>

</div>


<!-- Java Script
================================================== -->
<div th:replace="fragments/scripts :: scripts"></div>


<!-- Style Switcher
================================================== -->
<div th:replace="fragments/styleswitcher :: styleswitcher"></div>


</body>
</html>
